<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="Cache-Control" content="no-transform" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <meta name="viewport"
        content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <!--uc强制竖屏-->
    <meta name="screen-orientation" content="portrait">
    <!--QQ强制竖屏-->
    <meta name="x5-orientation" content="portrait">
    <meta name="format-detection" content="telephone=no,email=no">
    <link rel="stylesheet" href="css/public.css" />
    <link rel="stylesheet" href="css/style.css" />
    <title>签到抽奖</title>
</head>

<body class='bg_color01'>
    <div class="hd">
        <a href=""><img src="images/public_lt.png" alt=""></a>
        <h4>签到抽奖</h4>
    </div>


    <div class="luck_content">
        <img src="./images/Bitmap@2x.png" class="luck_bg">
        <div class='luck_top'>
            <img src="./images/luck_person.png" alt="">
            <div>
                <h2><span>当前颗粒数</span>216</h2>
                <p>已连续签到<span>3</span>天</p>
            </div>
            <a href="">查看签到记录<img src="./images/rt.png" alt=""></a>
        </div>
        <div class="luck_wrapper">
            <b>每天签到可赠送5颗粒、免费抽奖1次！连续签到7天额外增送50颗粒哦~</b>
            <ul>
                <li>
                    <b class='luck_changColor'>+5</b>
                    <p>10.31</p>
                </li>
                <li>
                    <b>+5</b>
                    <p>10.31</p>
                </li>
                <li>
                    <b>+5</b>
                    <p>10.31</p>
                </li>
                <li>
                    <b>+5</b>
                    <p>10.31</p>
                </li>
                <li>
                    <b>+5</b>
                    <p>10.31</p>
                </li>
                <li>
                    <b>+5</b>
                    <p>10.31</p>
                </li>
                <li>
                    <b>+55</b>
                    <p>10.31</p>
                </li>
            </ul>
            <p><span>签到</span> <img src="./images/luck_btn.png" alt=""></p>
        </div>
        <img src="./images/luck_titleImg.png" class="luck_titleImg">
        <div class='lotteryNotes'>
            <h4> <img src="./images/grain_title.png" alt=""><span>抽奖须知</span></h4>
            <p>
                <b> 1.每日签到，奖励一次免费抽奖机会</b>
                <b> 2.每日最多可参与3次抽奖</b>
                <b>3.除奖励的抽奖机会外，5颗粒换取一次抽奖机会</b>
                <b> 4.中奖优惠券在“卡券包”中查看，中奖颗粒数系统直接增加，其他奖品工作人员将会与直接您联系。</b>
            </p>
        </div>

        <div class='luck_pan'>
            <div class='luckPan_title'>
                今日您可以抽取<span>1</span>次奖品
            </div>
            <img src="images/1.png" id="shan-img" style="display:none;" />
            <img src="images/2.png" id="sorry-img" style="display:none;" />
            <div class="banner">
                <div class="turnplate" style="background-image:url(images/turnplate-bg.png);background-size:100% 100%">
                    <canvas class="item" id="wheelcanvas" width="422px" height="422px"></canvas>
                    <img class="pointer" src="images/turnplate-pointer.png" />
                </div>
            </div>
        </div>

        <div class='luck_bottom'>
            <img src="./images/luck_bottom.png" alt="">
            <div class="ranklist">
                <ul>
                    <li>
                        <h3>西****获得<span>50</span>颗粒</h3>
                    </li>
                    <li>
                        <h3>西****获得<span>50</span>颗粒</h3>
                    </li>
                    <li>
                        <h3>西****获得<span>50</span>颗粒</h3>
                    </li>
                    <li>
                        <h3>西****获得<span>50</span>颗粒</h3>
                    </li>
                    <li>
                        <h3>西****获得<span>50</span>颗粒</h3>
                    </li>
                    <li>
                        <h3>西****获得<span>50</span>颗粒</h3>
                    </li>
                    <li>
                        <h3>西****获得<span>50</span>颗粒</h3>
                    </li>
                    <li>
                        <h3>西****获得<span>50</span>颗粒</h3>
                    </li>
                    <li>
                        <h3>西****获得<span>50</span>颗粒</h3>
                    </li>
                    <li>
                        <h3>西****获得<span>50</span>颗粒</h3>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <div class="mask"></div>
    <div class="index_cover" style='display: none;'>
        <h3 class='txtTittle'>欢迎下次光临</h4>
            <button class='index_cover_btn'>我知道了</button>
    </div>

    <script src="js/rem.js"></script>
    <script src="js/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="js/luck_jquery-1.10.2.js"></script>
    <script type="text/javascript" src="js/luck_awardRotate.js"></script>
    <script type="text/javascript">
        (function ($) {

            $.fn.myScroll = function (options) {
                //默认配置
                var defaults = {
                    speed: 20, //滚动速度,值越大速度越慢
                    rowHeight: 24 //每行的高度
                };

                var opts = $.extend({}, defaults, options),
                    intId = [];

                function marquee(obj, step) {

                    obj.find("ul").animate({
                        marginTop: '-=1'
                    }, 0, function () {
                        var s = Math.abs(parseInt($(this).css("margin-top")));
                        if (s >= step) {
                            $(this).find("li").slice(0, 1).appendTo($(this));
                            $(this).css("margin-top", 0);
                        }
                    });
                }

                this.each(function (i) {
                    var sh = opts["rowHeight"],
                        speed = opts["speed"],
                        _this = $(this);
                    intId[i] = setInterval(function () {
                        if (_this.find("ul").height() <= _this.height()) {
                            clearInterval(intId[i]);
                        } else {
                            marquee(_this, sh);
                        }
                    }, speed);

                    _this.hover(function () {
                        clearInterval(intId[i]);
                    }, function () {
                        intId[i] = setInterval(function () {
                            if (_this.find("ul").height() <= _this.height()) {
                                clearInterval(intId[i]);
                            } else {
                                marquee(_this, sh);
                            }
                        }, speed);
                    });
                });
            }
        })(jQuery);

        $(function () {

            $("div.ranklist").myScroll({
                speed: 20,
                rowHeight: 24
            });

        });
    </script>

    <script>
        var turnplate = {
            restaraunts: [], //大转盘奖品名称
            colors: [], //大转盘奖品区块对应背景颜色
            outsideRadius: 192, //大转盘外圆的半径
            textRadius: 155, //大转盘奖品位置距离圆心的距离
            insideRadius: 68, //大转盘内圆的半径
            startAngle: 0, //开始角度
            randomRate: [], //控制获奖率，百分制(相加需等于100%)，对应restaraunts(顺序需要保持一致)，
            bRotate: false //false:停止;ture:旋转
        };

        $(document).ready(function () {
            //动态添加大转盘的奖品与奖品区域背景颜色
            turnplate.randomRate = ["50%", '50%', '0%', '0%', '0%', '0%']; //小心设置按100%分配
            turnplate.restaraunts = ["谢谢参与", "小米蓝牙耳机", "0.5%加息劵", "10元红包", "20元红包", "50元红包"];
            turnplate.colors = ["#FF9E15", "#F4E091", "#FF9E15", "#F4E091", "#FF9E15", "#F4E091"];


            var rotateTimeOut = function () {
                $('#wheelcanvas').rotate({
                    angle: 0,
                    animateTo: 2160,
                    duration: 8000,
                    callback: function () {
                        alert('网络超时，请检查您的网络设置！');
                    }
                });
            };

            //旋转转盘 item:奖品位置; txt：提示语;
            var rotateFn = function (item, txt) {
                var angles = item * (360 / turnplate.restaraunts.length) - (360 / (turnplate.restaraunts
                    .length * 2));
                if (angles < 270) {
                    angles = 270 - angles;
                } else {
                    angles = 360 - angles + 270;
                }
                $('#wheelcanvas').stopRotate();
                $('#wheelcanvas').rotate({
                    angle: 0,
                    animateTo: angles + 1800,
                    duration: 8000,
                    callback: function () {
                        // alert(txt);

                        // 弹窗
                        $(".mask").addClass("mask--visible");
                        // $('.txtTittle').text(txt);
                        $("html,body").css("overflow", "hidden");
                        $(".index_cover").css("display", "block");

                        $(".index_cover_btn").click(function () {
                            $(".mask").removeClass("mask--visible");
                            $("html,body").css("overflow", "auto");
                            $(".index_cover").css("display", "none");
                        });

                        //弹出框提示语
                        turnplate.bRotate = !turnplate.bRotate;
                    }
                });
            };

            $('.pointer').click(function () {
                if (turnplate.bRotate) return;
                turnplate.bRotate = !turnplate.bRotate;
                //获取随机数(奖品个数范围内)
                var item = rnd(turnplate.randomRate);
                //奖品数量等于10,指针落在对应奖品区域的中心角度[252, 216, 180, 144, 108, 72, 36, 360, 324, 288]
                rotateFn(item, turnplate.restaraunts[item - 1]);
            });
        });

        function rnd(rate) {
            var random = Math.floor(Math.random() * 100);
            var myRandom = [];
            var randomList = [];
            var randomParent = [];
            for (var i = 0; i < 100; i++) {
                myRandom.push(parseInt([i]) + 1);
            }
            for (var i = 0; i < rate.length; i++) {
                var temp = [];
                var start = 0;
                var end = 0;
                randomList.push(parseInt(rate[i].split('%')[0]));
                for (var j = 0; j < randomList.length; j++) {
                    start += randomList[j - 1] || 0
                    end += randomList[j]
                }
                temp = myRandom.slice(start, end);
                randomParent.push(temp)
            }
            for (var i = 0; i < randomParent.length; i++) {
                if ($.inArray(random, randomParent[i]) > 0) {
                    return (i + 1)
                }
            }

        }


        //页面所有元素加载完毕后执行drawRouletteWheel()方法对转盘进行渲染
        window.onload = function () {
            drawRouletteWheel();
        };

        function drawRouletteWheel() {
            var canvas = document.getElementById("wheelcanvas");
            if (canvas.getContext) {
                //根据奖品个数计算圆周角度
                var arc = Math.PI / (turnplate.restaraunts.length / 2);
                var ctx = canvas.getContext("2d");
                //在给定矩形内清空一个矩形
                ctx.clearRect(0, 0, 422, 422);
                //strokeStyle 属性设置或返回用于笔触的颜色、渐变或模式  
                ctx.strokeStyle = "#FFBE04";
                //font 属性设置或返回画布上文本内容的当前字体属性
                ctx.font = '16px Microsoft YaHei';
                for (var i = 0; i < turnplate.restaraunts.length; i++) {
                    var angle = turnplate.startAngle + i * arc;
                    ctx.fillStyle = turnplate.colors[i];
                    ctx.beginPath();
                    //arc(x,y,r,起始角,结束角,绘制方向) 方法创建弧/曲线（用于创建圆或部分圆）    
                    ctx.arc(211, 211, turnplate.outsideRadius, angle, angle + arc, false);
                    ctx.arc(211, 211, turnplate.insideRadius, angle + arc, angle, true);
                    ctx.stroke();
                    ctx.fill();
                    //锁画布(为了保存之前的画布状态)
                    ctx.save();

                    //----绘制奖品开始----
                    ctx.fillStyle = "#000";
                    ctx.font = "bold .8rem serif";
                    var text = turnplate.restaraunts[i];
                    var line_height = 17;
                    //translate方法重新映射画布上的 (0,0) 位置
                    ctx.translate(211 + Math.cos(angle + arc / 2) * turnplate.textRadius, 211 + Math.sin(angle + arc /
                        2) * turnplate.textRadius);

                    //rotate方法旋转当前的绘图
                    ctx.rotate(angle + arc / 2 + Math.PI / 2);

                    /** 下面代码根据奖品类型、奖品名称长度渲染不同效果，如字体、颜色、图片效果。(具体根据实际情况改变) **/
                    if (text.indexOf("M") > 0) { //流量包
                        var texts = text.split("M");
                        for (var j = 0; j < texts.length; j++) {
                            ctx.font = j == 0 ? 'bold 20px Microsoft YaHei' : '16px Microsoft YaHei';
                            if (j == 0) {
                                ctx.fillText(texts[j] + "M", -ctx.measureText(texts[j] + "M").width / 2, j *
                                    line_height);
                            } else {
                                ctx.fillText(texts[j], -ctx.measureText(texts[j]).width / 2, j * line_height);
                            }
                        }
                    } else if (text.indexOf("M") == -1 && text.length > 6) { //奖品名称长度超过一定范围 
                        text = text.substring(0, 6) + "||" + text.substring(6);
                        var texts = text.split("||");
                        for (var j = 0; j < texts.length; j++) {
                            ctx.fillText(texts[j], -ctx.measureText(texts[j]).width / 2, j * line_height);
                        }
                    } else {
                        //在画布上绘制填色的文本。文本的默认颜色是黑色
                        //measureText()方法返回包含一个对象，该对象包含以像素计的指定字体宽度
                        ctx.fillText(text, -ctx.measureText(text).width / 2, 0);
                    }

                    //添加对应图标
                    if (text.indexOf("红包") > 0) {
                        var img = document.getElementById("shan-img");
                        img.onload = function () {
                            ctx.drawImage(img, -15, 10);
                        };
                        ctx.drawImage(img, -15, 10);
                    } else if (text.indexOf("谢谢参与") >= 0) {
                        var img = document.getElementById("sorry-img");
                        img.onload = function () {
                            ctx.drawImage(img, -15, 10);
                        };
                        ctx.drawImage(img, -15, 10);
                    }
                    //把当前画布返回（调整）到上一个save()状态之前 
                    ctx.restore();
                    //----绘制奖品结束----
                }
            }
        }
    </script>
</body>

</html>